<template>
  <BackHeader :title="lang.download_app_title" />
  <div class="content">
    <div class="content-logo">
      <div class="content-logo-box">
        <NuxtImg src="/images/layout/downloadAppPage_1.png" class="logo" />
      </div>
      <div class="content-btn-box" @click="goDownload" v-click-move>
        <div class="btn-box download-btn">
          <span class="btn-icon">
            <NuxtImg src="/images/layout/xiazai.png" />
          </span>
          <span class="btn-title">{{ lang.download_btn }}</span>
        </div>
      </div>
    </div>
    <div class="content-desc">
      <div class="desc">
        <div class="desc-title">
          <span class="title">{{ lang.download_desc }}</span>
        </div>
        <div class="desc-list">
          <p class="desc-item">
            {{ lang.download_desc_item1 }}
          </p>
          <p class="desc-item">
            {{ lang.download_desc_item2 }}
          </p>
          <p class="desc-item">
            {{ lang.download_desc_item3 }}
          </p>
          <p class="desc-item">
            {{ lang.download_desc_item4 }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("download-app");

function goDownload() {
  showNotify({ type: "success", message: "此处触发下载" });
}
</script>

<style scoped lang="scss">
.content {
  padding: 2rem 0.38rem 0;
  color: var(--theme-neutral1);
}
.content .content-logo-box {
  display: flex;
  justify-content: center;
  margin-bottom: 1.29rem;
}
.content .logo {
  width: 6.35rem;
  height: 4.81rem;
}
.content .content-btn-box {
  cursor: pointer;
  display: flex;
  justify-content: center;
}
.content .content-btn-box .btn-box {
  width: 100%;
  height: 1.2rem;
  border-radius: 0.3rem;
  background: linear-gradient(180deg, #e151a4 0%, #e66fc8 81%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
}

.content .content-btn-box .btn-box .btn-icon img {
  width: 0.6rem;
  height: 0.6rem;
  vertical-align: middle;
  transform: translateY(0.05rem);
}

.content .content-btn-box .btn-box .btn-title {
  font-family: Arial;
  font-weight: 700;
  font-size: 0.44rem;
  padding-top: 0.1rem;
}
.content .content-desc {
  padding-top: 0.9rem;
}
.desc {
  font-weight: 400;
  font-size: 0.35rem;
  margin-top: 0.5rem;
  box-sizing: border-box;
  padding-bottom: 2rem;
}
.desc .desc-title {
  display: flex;
  align-items: center;
  font-family: Arial;
}
.desc .desc-title .title {
  color: #7a4289;
  font-size: 0.44rem;
}
.desc .desc-list {
  font-size: 0.34rem;
  color: var(--theme-neutral2);
}
.desc .desc-list .desc-item {
  margin-top: 0.2rem;
  text-indent: -1em;
  padding-left: 1em;
  color: #86718c;
}
</style>
